// 引入基础库
import React, { Component } from 'react'; 
/**
 * 引入immutable类型，解决对象深拷贝等问题，react性能优化
 * 1.fromJS():将一个js数据转换为Immutable类型的数据。
 * 2.is():对两个对象进行比较。
 */
import { is, fromJS } from 'immutable';
/**
 * 引入路由
 * 1.navLink就是特别版的Link
 * 2.可以给组件添加类名
 * 3.Switch表示可切换的视图部分
 */
import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
import PublicHeader from '@/components/header/header';
import RecordList from './components/recordList';
// 引入样式
import './record.less';

class Record extends Component {
  /**
   * 元数据
   * 设置头部底部标签位置
   * @param  {string} type 数据类型
   */
  state = {
    flagBarPos: '17%',
  }
  /**
   * 定义方法
   * 设置头部底部标签位置(tab切换栏底部动画)
   * @param  {string} type 数据类型
   * 此方法初始化时调用，点击切换的时候也调用
   */
  setFlagBarPos = type => {
    let flagBarPos;
    switch(type){
      case 'passed':
        flagBarPos = '17%';
      break;
      case 'audited':
        flagBarPos = '50%';
      break;
      case 'failed':
        flagBarPos = '83%';
      break;
      default: 
        flagBarPos = '17%';
    }
    this.setState({flagBarPos})
  }

  /**
   * 生命周期钩子
   * 设置头部底部标签位置
   * @param  {string} type 数据类型
   */
  componentWillReceiveProps(nextProps){
    // 属性变化时设置头部底部标签位置
    let currenType = this.props.location.pathname.split('/')[2];
    let type = nextProps.location.pathname.split('/')[2];
    if(currenType !== type){
      this.setFlagBarPos(type);
    }
  }
  /**
   * 生命周期钩子
   * 避免重复渲染
   * 
   */
  shouldComponentUpdate(nextProps, nextState){
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * 生命周期钩子
   * 设置头部底部标签位置
   * @param  {string} type 数据类型
   */
  componentWillMount(){
    // 初始化设置头部底部标签位置
    let type = this.props.location.pathname.split('/')[2];
    this.setFlagBarPos(type);
  }

  /**
   * 模板
   * 该模板分为几部分
   */
  render() {
    return (
      <main className="common-con-top">
        <PublicHeader title='记录' />
        <section className="record-nav-con">
          <nav className="record-nav">
            <NavLink to={`${this.props.match.path}/passed`} className="nav-link">已通过</NavLink>
            <NavLink to={`${this.props.match.path}/audited`} className="nav-link">待审核</NavLink>
            <NavLink to={`${this.props.match.path}/failed`} className="nav-link">未通过</NavLink>
          </nav>
          <i className="nav-flag-bar" style={{left: this.state.flagBarPos}}></i>
        </section>
        {/* 子路由在父级配置，react-router4新特性，更加灵活 */}
        <Switch>
          <Route path={`${this.props.match.path}/:type`} component={RecordList} />
          <Redirect from={`${this.props.match.path}`} to={`${this.props.match.path}/passed`} exact component={RecordList} />
        </Switch>
      </main>
    );
  }
}
/**
 * 导出组件
 */
export default Record;
